<template>
  <!--数据字典-->
  <section class="page user-manage">
    <div class="row">
      <div class="col-span-4 dataDict-tree node-title">
        <el-tree
          class="tres"
          align="left"
          :data="treeData"
          highlight-current
          :default-expanded-keys="defaultKeys"
          node-key="id"
          :props="{ label: 'name' }"
          accordion
          ref="tree"
          @node-click="handleNodeClick"
          :expand-on-click-node="false"
        >
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>{{ node.label }}</span>
            <small style="padding-left: 10px; z-index: 1000" class="icon-box">
              <el-button
                v-show="node.level === 2"
                type="text"
                size="mini"
                @click="add(data, node)"
                >新增</el-button
              >
              <!-- <el-button v-show="node.data.parentId!==null && node.level!==1" type="text" size="mini" @click="modifyDataDict(data,node)">修改</el-button>
              <el-button v-show="node.data.parentId!==null && node.level!==1" type="text" size="mini" @click="open(data)">删除</el-button> -->
            </small>
          </span>
        </el-tree>
      </div>
      <div class="col-span-8">
        <data-box :data="tableData" ref="data-box">
          <template slot="columns">
            <el-table-column
              prop="parentName"
              label="父即类别"
              :min-width="$helper.getColumnWidth(1)"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="name"
              label="代码名称"
              :min-width="$helper.getColumnWidth(1)"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="status"
              label="代码状态"
              :min-width="$helper.getColumnWidth(1)"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <span>{{ scope.row.status === 0 ? "无效" : "有效" }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="level"
              label="优先级"
              :min-width="$helper.getColumnWidth(1)"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="createTime"
              label="创建时间"
              :min-width="$helper.getColumnWidth(1)"
              :formatter="(row) => $filter.dateTimeFormat(row.createTime)"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              label="操作"
              :min-width="$helper.getColumnWidth(2)"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <el-button
                  @click="
                    handleClick(scope.row);
                    dialog.dialogTableVisible = true;
                  "
                  type="text"
                  size="small"
                  >修改</el-button
                >
                <!-- <el-button
                  v-if="
                    scope.row.parentName !== '数据字典' && scope.row.parentName
                  "
                  type="text"
                  size="small"
                  @click="open(scope.row)"ZD006
                  >删除</el-button
                > -->
              </template>
            </el-table-column>
          </template>
        </data-box>
      </div>
    </div>
    <el-dialog
      title="修改代码参数字典"
      @open="$nextTick(() => $refs['modify-dataDict'].refresh(data, node))"
      width="900px"
      :visible.sync="dialog.dialogTableVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
    >
      <modify-dataDict
        ref="modify-dataDict"
        @close="dialog.dialogTableVisible = false"
        @refreshList="refreshData"
        @refreshDataBox="refreshDataBox"
        :tableRow="tableRow"
      ></modify-dataDict>
    </el-dialog>
    <el-dialog
      title="新增代码参数字典"
      @open="$nextTick(() => $refs['add-dataDict'].refresh(data, node))"
      width="900px"
      :visible.sync="dialog.addTableVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
    >
      <add-dataDict
        :treeDatas="dataList"
        ref="add-dataDict"
        @close="dialog.addTableVisible = false"
        @refreshList="refreshData"
      ></add-dataDict>
    </el-dialog>
  </section>
</template>
<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Auth, Layout, Dependencies } from "~/core/decorator";
import { PageService } from "~/utils/page.service";
import DataBox from "~/components/common/data-box.vue";
import DataTree from "~/components/common/data-tree.vue";
import ModifyDataDict from "~/components/system-manage/data-dict/modify-dataDict.vue";
import AddDataDict from "~/components/system-manage/data-dict/add-dataDict.vue";
import { CommonService } from "~/utils/common.service";
import { CodePrarmeterService } from "~/services/management-service/code-prarmeter.service";
// import { DataPoolService } from "~/services/common-service/data-pool.service";
import { UserService } from "~/services/management-service/user.service";
import { State } from "vuex-class";
@Layout("workspace")
@Component({
  components: {
    DataTree,
    DataBox,
    ModifyDataDict,
    AddDataDict,
  },
})
export default class DataDict extends Vue {
  @Dependencies(PageService)
  private pageService: PageService;
  @Dependencies(UserService)
  private userService: UserService;
  @Dependencies(CodePrarmeterService)
  private codePrarmeterService: CodePrarmeterService;
  @State private customDataDict;
  private treeDefaultSelection: any = [];
  private data: any = [];
  private tableRow: any = {};
  private CHEAT_TYPE: any = [];
  private treeData: any[] = [];
  private selected: any = false;
  private root: any = {};
  private node: any = {};
  private checked: any = "";
  private tableData: any = [];
  private showEdit: any = "";
  private dataList: any = [];
  private currentNode: any = {
    id: "",
    parentName: "",
  };
  private defaultKeys: any = [];

  private dialog: any = {
    dialogTableVisible: false,
    addTableVisible: false,
    modifyDataDict: false,
  };

  private modifyDataDict(data, node) {
    this.handleNodeClick(data, node);
    this.dialog.dialogTableVisible = true;
  }
  private refresh() {
    this.tableData();
  }
  private handleNodeClick(data, node) {
    this.defaultKeys[0] = data.id;
    this.data = data;
    this.node = node;
    if (data.id === 1) {
      return;
    }
    this.getAllChildrenById(data.id);
  }
  // 获取列表
  private getAllChildrenById(ids) {
    this.userService.getAllChildrenById({id: ids }).subscribe((data) => {
      this.tableData = data;
      data.map((item) => {
        item.createTime = item.timeCreated;
      });
    });
  }
  // 修改
  private handleClick(row) {
    this.tableRow = row;
  }

  private open(row) {
    const deleteData: any = { id: row.id };
    this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        this.userService.deleteCodeConfigInfo(deleteData).subscribe(
          (data) => {
            this.$message.success("删除成功");
            this.refreshData(this.defaultKeys[0]);
            this.tableData = [];
          },
          ({ data }) => {
            this.$message.error(data.message);
          }
        );
      })
      .catch(() => {});
  }
  /**
   * 新增
   */
  private add(data, node) {
    this.handleNodeClick(data, node)
    this.dialog.addTableVisible = true;
    this.dataList = [this.data, this.node];
    this.$nextTick(() => {
      const addTree: any = this.$refs["add-dataDict"];
      addTree.queueIdChange(data, node);
    });
  }

  private onCurrentChange(data, node) {
    this.currentNode.id = data.id;
    this.currentNode.parentName = node.parent.label;
    this.refreshDataBox();
    this.selected = true;
    this.showEdit = node.data.parentId;
  }

  private refreshDataBox() {
    this.tableData = [];
    this.codePrarmeterService
      .updateCodeConfig({ dataId: this.currentNode.id })
      .subscribe((data) => {
        this.tableData.push({
          parentName: this.currentNode.parentName,
          name: data.name,
          priority: data.level,
          status: data.status,
          createTime: data.createTime,
        });
      });
  }

  private refreshData(id) {
    this.tableData = [];
    this.codePrarmeterService.getAllCode().subscribe((data) => {
      const treeDataTmp = CommonService.generateTreeData(data, {
        keyName: "id",
        parentKeyName: "parentId",
        sortKey: "resoSort",
      });
      treeDataTmp.forEach((e) => (e.parent = 0));
      const arr = [
        { id: -1, name: "代码参数管理", parent: 0, children: treeDataTmp },
      ];
      this.treeData = arr;
      this.defaultKeys[0] = id ? id : arr[0].id;
      this.$nextTick(() => {
        const tree : any = this.$refs.tree
        tree.setCurrentKey(this.defaultKeys[0])
      });
      if (this.defaultKeys.length > 0) {
        this.getAllChildrenById(this.defaultKeys[0]);
      }
    });
  }

  private mounted() {
    this.refreshData(this.defaultKeys[0])
  }
}
</script>

<style lang="less" scoped>
.page.user-manage {
  .resource-tree {
    flex-basis: 200px;
  }
  .col-span-4 {
    padding: 10px 10px;
  }
  .dataDict-tree {
    border: solid 1px #e4e4e4;
    min-height: 600px;
    min-width: 350px;
    overflow-x: auto;
  }
  .tres {
    font-size: 14px;
  }
}
</style>

<style lang="less">
// 数据字典加滚动条
.page.user-manage {
  .el-tree > .el-tree-node {
    min-width: 100%;
    display: inline-block !important;
  }
}
</style>
